<template>
  <div class="app">
    <!-- 头部 -->
    <Header></Header>
    <!-- 选项卡区域 -->
    <div class="tabs">
      <ul>
        <li>
          <router-link to="/goods">商品</router-link>
        </li>
        <li>
          <router-link to="/rating">评价</router-link>
        </li>
        <li>
          <router-link to="/seller">商家</router-link>
        </li>
      </ul>
      <router-view></router-view>
    </div>
    <!-- 购物车  遮罩层部分 -->
    <div class="car" v-show="$store.state.show">
      <div class="mask"></div>
      <ul>
        <li>
          <p>购物车</p>
          <p style="color:skyblue;margin-right:2vw" @click="clearCar">清空</p>
        </li>
        <li v-for="item in carList" :key="item.name">
          <p>{{ item.name }}</p>
          <p>￥{{ item.price * item.count }}</p>
          <Btns :item="item"></Btns>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Header from './views/Header.vue'
import { mapState, mapMutations } from 'vuex'
import Btns from './views/Tabs/Btns.vue'
export default {
  components: {
    Header,
    Btns
  },
  computed: {
    ...mapState(["carList",]),
  },
  data() {
    return {
    }
  },
  methods: {
    ...mapMutations(['clearCar'])

  }
}
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  /* background-color: red; */
  position: relative;
}

.app>.car {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 17, 27, 0.6);
  backdrop-filter: blur(10px);

}

.app .car .mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 17, 27, 0.6);
}

.app .car ul {
  position: absolute;
  bottom: 50px;
  width: 100%;
  left: 0;
  background: white;
}

.car ul li {
  display: flex;
  font-size: 5.067vw;
  padding: 3.2vw 0vw;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}

.car ul li>p:nth-child(2) {
  color: red
}

.tabs {
  height: 70vh;
  overflow: hidden;
}

.tabs ul {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}

.tabs>ul>li {
  height: 40px;
  line-height: 40px
}

.tabs>ul>li>a:hover {
  color: red
}
</style>